<div  style="padding:12px;">
	<!-- 选择班级 -->
	<select id="search_select" class="form-control pull-left" style="width:150px;margin-right:15px;">
		<option value="name" selected="selected">综合成绩</option>
		<option value="nativeid">语文</option>
    	<option value="sex">数学</option>
    	<option value="birthday">英语</option>
    	<option value="tel">体育</option>
	</select>
	<!-- 选择展示方式 -->
	<select id="search_select" class="form-control pull-left" style="width:150px;margin-right:15px;">
		<option value="name" selected="selected">排名</option>
		<option value="nativeid">成绩</option>
	</select>
	<!-- 选择学生 -->
	<select id="search_select" class="form-control pull-left" style="width:150px;margin-right:15px;">
		<option value="name" selected="selected">班级</option>
		<option value="nativeid">lucky</option>
		<option value="nativeid">小娟</option>
		<option value="nativeid">小松</option>
	</select>

    <button id="search_send_button" class="btn btn-default  btn-primary" type="button" style="margin-right:5px;">确定</button>
</div>
<div style="text-align:center;font-size:18px;line-height:35px;">
	<span>三年1班</span>成绩分布直方图
</div>
<div class="histogram-container" id="histogram-container">
    <!--背景方格-->
    <div class="histogram-bg-line">
        <ul>
            <li><div></div></li>
            <li><div></div></li>
            <li><div></div></li>
            <li><div></div></li>
        </ul>
        <ul>
            <li><div></div></li>
            <li><div></div></li>
            <li><div></div></li>
            <li><div></div></li>
        </ul>
        <ul>
            <li><div></div></li>
            <li><div></div></li>
            <li><div></div></li>
            <li><div></div></li>
        </ul>
        <ul>
            <li><div></div></li>
            <li><div></div></li>
            <li><div></div></li>
            <li><div></div></li>
        </ul>
        <ul>
            <li><div></div></li>
            <li><div></div></li>
            <li><div></div></li>
            <li><div></div></li>
        </ul>
    </div>
    <!--柱状条-->
    <div class="histogram-content">
        <ul>
            <li>
                <span class="histogram-box"><a style="height:20%;background:green;" title="20%"></a></span>
                <span class="name">第一次月考</span>
            </li>
            <li>
                <span class="histogram-box"><a style="height:40%;background:#ddd;" title="40%"></a></span>
                <span class="name">第二次月考</span>
            </li>
            <li>
                <span class="histogram-box"><a style="height:50%;background:#ddd;" title="50%"></a></span>
                <span class="name">期中考试</span>
            </li>
            <li>
                <span class="histogram-box"><a style="height:80%;background:#ddd;" title="80%"></a></span>
                <span class="name">期末考试</span>
            </li>
        </ul>
    </div>
    <!--百分比 y轴-->
    <div class="histogram-y">
        <ul>
            <li>第10名</li>
            <li>第8名</li>
            <li>第6名</li>
            <li>第4名</li>
            <li>第2名</li>
            <li>第0名</li>
        </ul>
    </div>
</div>